JavaScript Temporal API: Modern Datum- och Tidshantering

JavaScript-objektet Date har länge varit en källa till frustration för utvecklare. Dess föränderlighet, brist på inbyggt stöd för tidszoner och besvärliga API har lett till otaliga bibliotek och lösningar. Lyckligtvis syftar Temporal API till att åtgärda dessa brister och tillhandahålla en modern, intuitiv och tidzonsmedveten lösning för datum- och tidshantering i JavaScript.

Vad är Temporal API?

Temporal API är ett nytt globalt objekt, Temporal, som tillhandahåller ett modernt och standardiserat sätt att arbeta med datum och tider i JavaScript. Det är utformat för att ersätta det gamla Date-objektet och erbjuder betydande förbättringar när det gäller API-design, oföränderlighet, stöd för tidszoner och övergripande användbarhet. Det är en del av ECMAScript-förslaget och implementeras i stora JavaScript-motorer.

Viktiga fördelar med Temporal API:

• Oföränderlighet: Temporala objekt är oföränderliga, vilket innebär att operationer på dem returnerar nya objekt istället för att modifiera originalet. Detta hjälper till att förhindra oväntade biverkningar och gör koden lättare att förstå.
• Tydligt API: API:et är utformat för att vara mer intuitivt och konsekvent än det gamla Date-objektet.
• Tidszonsstöd: Temporal ger robust stöd för tidszoner, vilket gör att du kan arbeta med datum och tider på olika platser runt om i världen.
• Kalenderstöd: Utöver den gregorianska kalendern tillåter API:et att använda andra kalendersystem, vilket underlättar globala applikationer.
• Skottsekundshantering: Temporal API tar hänsyn till skottsekunder och ger mer exakta tidsberäkningar.

Komma igång med Temporal

Även om Temporal API fortfarande är under utveckling och ännu inte stöds fullt ut i alla webbläsare och Node.js-miljöer, kan du använda en polyfill för att börja experimentera med det idag. Du kan installera polyfill via npm:

            npm install @js-temporal/polyfill
            

              
                Copy
              
            
          

Importera sedan polyfill i din JavaScript-kod:

            import { Temporal } from '@js-temporal/polyfill';
            

              
                Copy
              
            
          

När polyfill är installerat kan du börja använda Temporal-objektet och dess olika klasser.

Kärnklasser i Temporal

Temporal API tillhandahåller flera nyckelklasser för att arbeta med datum och tider:

• Temporal.PlainDate: Representerar ett kalenderdatum (år, månad och dag) utan någon tidszon eller tid på dygnet.
• Temporal.PlainTime: Representerar en tid på dygnet (timme, minut, sekund och bråkdel av en sekund) utan någon datum- eller tidszonsinformation.
• Temporal.PlainDateTime: Representerar ett datum och en tid utan någon tidszonsinformation.
• Temporal.ZonedDateTime: Representerar ett datum och en tid med en specifik tidszon.
• Temporal.Instant: Representerar en specifik tidpunkt, mätt i nanosekunder sedan Unix-epoken (1 januari 1970, kl. 00:00:00 Coordinated Universal Time (UTC)).
• Temporal.TimeZone: Representerar en tidszon.
• Temporal.Duration: Representerar en tidsperiod, såsom timmar, minuter eller sekunder.
• Temporal.Now: Ger åtkomst till aktuellt datum och tid.

Arbeta med PlainDate

Klassen Temporal.PlainDate representerar ett datum utan någon tidszon eller tid på dygnet. Den är användbar för att representera födelsedagar, årsdagar eller andra datumbaserade händelser.

Skapa en PlainDate:

            const plainDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26 });
console.log(plainDate.toString()); // Output: 2024-10-26
            

              
                Copy
              
            
          

Du kan också skapa en PlainDate från en sträng i ISO 8601-format:

            const plainDateFromString = Temporal.PlainDate.from('2024-12-25');
console.log(plainDateFromString.toString()); // Output: 2024-12-25
            

              
                Copy
              
            
          

Åtkomst till datumkomponenter:

            const year = plainDate.year; // 2024
const month = plainDate.month; // 10
const day = plainDate.day;   // 26
const dayOfWeek = plainDate.dayOfWeek; // Veckodag (1-7, måndag-söndag)
const dayOfYear = plainDate.dayOfYear; // Dag på året (1-366)
const daysInMonth = plainDate.daysInMonth; // Antal dagar i månaden
const isLeapYear = plainDate.isLeapYear;   // Boolesk som indikerar om året är ett skottår
            

              
                Copy
              
            
          

Lägga till och subtrahera dagar:

            const nextDay = plainDate.add({ days: 1 });
console.log(nextDay.toString()); // Output: 2024-10-27

const previousWeek = plainDate.subtract({ weeks: 1 });
console.log(previousWeek.toString()); // Output: 2024-10-19
            

              
                Copy
              
            
          

Jämföra datum:

            const anotherDate = Temporal.PlainDate.from({ year: 2024, month: 11, day: 15 });

if (plainDate.equals(anotherDate)) {
  console.log('Datumen är lika');
} else if (plainDate.lessThan(anotherDate)) {
  console.log('plainDate är tidigare än anotherDate');
} else {
  console.log('plainDate är senare än anotherDate');
}
// Output: plainDate är tidigare än anotherDate
            

              
                Copy
              
            
          

Arbeta med PlainTime

Klassen Temporal.PlainTime representerar en tid på dygnet utan någon datum- eller tidszonsinformation. Den är användbar för att representera öppettider, mötestider eller andra tidsbaserade händelser.

Skapa en PlainTime:

            const plainTime = Temporal.PlainTime.from({ hour: 14, minute: 30, second: 0 });
console.log(plainTime.toString()); // Output: 14:30:00
            

              
                Copy
              
            
          

Du kan också skapa en PlainTime från en sträng i ISO 8601-format:

            const plainTimeFromString = Temporal.PlainTime.from('09:00:00');
console.log(plainTimeFromString.toString()); // Output: 09:00:00
            

              
                Copy
              
            
          

Åtkomst till tidskomponenter:

            const hour = plainTime.hour;   // 14
const minute = plainTime.minute; // 30
const second = plainTime.second; // 0
const millisecond = plainTime.millisecond; // 0
const microsecond = plainTime.microsecond; // 0
const nanosecond = plainTime.nanosecond;   // 0
            

              
                Copy
              
            
          

Lägga till och subtrahera tid:

            const laterTime = plainTime.add({ minutes: 15 });
console.log(laterTime.toString()); // Output: 14:45:00

const earlierTime = plainTime.subtract({ hours: 1 });
console.log(earlierTime.toString()); // Output: 13:30:00
            

              
                Copy
              
            
          

Jämföra tider:

            const anotherTime = Temporal.PlainTime.from({ hour: 15, minute: 0, second: 0 });

if (plainTime.equals(anotherTime)) {
  console.log('Tiderna är lika');
} else if (plainTime.lessThan(anotherTime)) {
  console.log('plainTime är tidigare än anotherTime');
} else {
  console.log('plainTime är senare än anotherTime');
}
// Output: plainTime är tidigare än anotherTime
            

              
                Copy
              
            
          

Arbeta med PlainDateTime

Klassen Temporal.PlainDateTime representerar ett datum och en tid utan någon tidszonsinformation. Den kombinerar funktionaliteten i PlainDate och PlainTime.

Skapa en PlainDateTime:

            const plainDateTime = Temporal.PlainDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0 });
console.log(plainDateTime.toString()); // Output: 2024-10-26T14:30:00
            

              
                Copy
              
            
          

Du kan också skapa en PlainDateTime från en sträng i ISO 8601-format:

            const plainDateTimeFromString = Temporal.PlainDateTime.from('2024-12-25T09:00:00');
console.log(plainDateTimeFromString.toString()); // Output: 2024-12-25T09:00:00
            

              
                Copy
              
            
          

Åtkomst till datum- och tidskomponenter:

            const year = plainDateTime.year;   // 2024
const month = plainDateTime.month; // 10
const day = plainDateTime.day;     // 26
const hour = plainDateTime.hour;   // 14
const minute = plainDateTime.minute; // 30
const second = plainDateTime.second; // 0
            

              
                Copy
              
            
          

Lägga till och subtrahera datum och tider:

            const nextDayAndTime = plainDateTime.add({ days: 1, hours: 2 });
console.log(nextDayAndTime.toString()); // Output: 2024-10-27T16:30:00

const previousWeekAndTime = plainDateTime.subtract({ weeks: 1, minutes: 30 });
console.log(previousWeekAndTime.toString()); // Output: 2024-10-19T14:00:00
            

              
                Copy
              
            
          

Konvertera till PlainDate och PlainTime:

            const plainDateFromDateTime = plainDateTime.toPlainDate();
console.log(plainDateFromDateTime.toString()); // Output: 2024-10-26

const plainTimeFromDateTime = plainDateTime.toPlainTime();
console.log(plainTimeFromDateTime.toString()); // Output: 14:30:00
            

              
                Copy
              
            
          

Arbeta med ZonedDateTime

Klassen Temporal.ZonedDateTime representerar ett datum och en tid med en specifik tidszon. Detta är avgörande för applikationer som behöver hantera datum och tider på olika platser runt om i världen. Till skillnad från det gamla Date-objektet har Temporal inbyggt stöd för tidszoner.

Skapa en ZonedDateTime:

            const zonedDateTime = Temporal.ZonedDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0, timeZone: 'America/Los_Angeles' });
console.log(zonedDateTime.toString()); // Output: 2024-10-26T14:30:00-07:00[America/Los_Angeles]
            

              
                Copy
              
            
          

Du kan också skapa en ZonedDateTime från en Instant och en tidszon:

            const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Exempel på tidsstämpel
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('Europe/London');
console.log(zonedDateTimeFromInstant.toString()); // Utdata varierar beroende på den faktiska tidpunkten men återspeglar datum/tid i Europa/London
            

              
                Copy
              
            
          

Åtkomst till datum- och tidskomponenter:

            const year = zonedDateTime.year;   // 2024
const month = zonedDateTime.month; // 10
const day = zonedDateTime.day;     // 26
const hour = zonedDateTime.hour;   // 14
const minute = zonedDateTime.minute; // 30
const second = zonedDateTime.second; // 0
const timeZone = zonedDateTime.timeZone; // Temporal.TimeZone-objekt
            

              
                Copy
              
            
          

Konvertera mellan tidszoner:

            const newYorkDateTime = zonedDateTime.withTimeZone('America/New_York');
console.log(newYorkDateTime.toString()); // Output: 2024-10-26T17:30:00-04:00[America/New_York]
            

              
                Copy
              
            
          

Hantering av sommartid (DST):

Temporal hanterar automatiskt DST-övergångar. När du lägger till eller subtraherar tid tar den hänsyn till DST, vilket säkerställer korrekta resultat. Tänk till exempel på ett möte som är schemalagt över DST-övergången i Tyskland:

            const meetingStart = Temporal.ZonedDateTime.from({ year: 2024, month: 3, day: 31, hour: 2, minute: 30, timeZone: 'Europe/Berlin' });
const meetingEnd = meetingStart.add({ hours: 1 }); // Lägger till 1 timme
console.log(meetingEnd.toString()); // Output: 2024-03-31T03:30:00+02:00[Europe/Berlin]. Observera att förskjutningen ändras på grund av DST
            

              
                Copy
              
            
          

Arbeta med Instant

Klassen Temporal.Instant representerar en specifik tidpunkt, mätt i nanosekunder sedan Unix-epoken. Den är användbar för att lagra och jämföra exakta tidpunkter.

Skapa en Instant:

            const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Exempel på Unix-tidsstämpel i sekunder
console.log(instant.toString()); // Utdata kommer att vara en ISO-strängrepresentation av den tidpunkten
            

              
                Copy
              
            
          

Konvertera till ZonedDateTime:

            const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('America/Los_Angeles');
console.log(zonedDateTimeFromInstant.toString()); // Utdata: Datum och tid i America/Los_Angeles motsvarande den tidpunkten
            

              
                Copy
              
            
          

Jämföra Instant:

            const anotherInstant = Temporal.Instant.fromEpochSeconds(1666790000);

if (instant.equals(anotherInstant)) {
  console.log('Tidpunkterna är lika');
} else if (instant.lessThan(anotherInstant)) {
  console.log('instant är tidigare än anotherInstant');
} else {
  console.log('instant är senare än anotherInstant');
}
// Output: instant är tidigare än anotherInstant
            

              
                Copy
              
            
          

Arbeta med Duration

Klassen Temporal.Duration representerar en tidsperiod, såsom timmar, minuter eller sekunder. Den är användbar för att beräkna skillnaden mellan två datum eller tider.

Skapa en Duration:

            const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });
console.log(duration.toString()); // Output: PT2H30M
            

              
                Copy
              
            
          

Beräkna skillnaden mellan datum/tider:

            const startDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 1, hour: 0, minute: 0, second: 0 });
const endDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 3, hour: 12, minute: 30, second: 0 });
const difference = endDate.since(startDate);
console.log(difference.toString()); // Output: P2DT12H30M

// Åtkomst till komponenterna i varaktigheten
console.log(difference.days);    // 2
console.log(difference.hours);   // 12
console.log(difference.minutes); // 30
            

              
                Copy
              
            
          

Lägga till varaktighet till datum/tider:

            const newDate = startDate.add(duration);
console.log(newDate.toString()); // Output: 2024-01-03T02:30:00
            

              
                Copy
              
            
          

Arbeta med kalendrar

Temporal API stöder olika kalendersystem utöver den gregorianska kalendern. Även om det inte är fullt implementerat i alla polyfyllningar och motorer ännu, är avsikten att tillåta applikationer att hantera datum i kalendrar som är specifika för olika kulturer. För att till exempel använda den japanska kalendern (hypotetiskt, eftersom implementeringen fortfarande utvecklas):

            // Detta är ett konceptuellt exempel eftersom kalenderstödet fortfarande är under utveckling
// const japaneseDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26, calendar: 'japanese' });
// console.log(japaneseDate.toString()); // Förväntat: Utdata formaterad enligt den japanska kalendern

            

              
                Copy
              
            
          

Obs: Kalenderstöd är en funktion i Temporal API som utvecklas, och full funktionalitet är ännu inte allmänt tillgänglig.

Praktiska exempel och användningsfall

Temporal API erbjuder ett brett spektrum av möjligheter för att hantera datum och tider i JavaScript. Här är några praktiska exempel och användningsfall:

• Schemalägga möten: Skapa en schemaläggningsapplikation som låter användare boka möten i sin lokala tidszon. Temporal.ZonedDateTime gör det enkelt att konvertera mellan tidszoner och hantera DST-övergångar. För en klinik i Berlin som schemalägger möten globalt:

            const appointmentTimeBerlin = Temporal.ZonedDateTime.from({ year: 2024, month: 11, day: 5, hour: 10, minute: 0, timeZone: 'Europe/Berlin' });
const appointmentTimeLA = appointmentTimeBerlin.withTimeZone('America/Los_Angeles');
console.log(`Mötestid i Berlin: ${appointmentTimeBerlin.toString()}`);
console.log(`Mötestid i Los Angeles: ${appointmentTimeLA.toString()}`);
            

              
                Copy
              
            
          

• Beräkna ålder: Fastställa en användares ålder baserat på deras födelsedatum. PlainDate låter dig representera födelsedatumet utan någon tidszonsinformation.

            const birthDate = Temporal.PlainDate.from({ year: 1990, month: 5, day: 15 });
const today = Temporal.Now.plainDateISO();
const age = today.year - birthDate.year - (today.month < birthDate.month || (today.month === birthDate.month && today.day < birthDate.day) ? 1 : 0);
console.log(`Ålder: ${age}`);
            

              
                Copy
              
            
          

• Visa datum och tider i olika format: Formatera datum och tider enligt användarens språk. Även om internationaliseringsfunktioner (Intl) är separata, kan Temporal-objekt enkelt formateras med toLocaleString() eller liknande metoder i kombination med Intl API-funktioner.

            const zonedDateTimeNow = Temporal.Now.zonedDateTimeISO('en-GB');
console.log(zonedDateTimeNow.toLocaleString('en-GB'));
console.log(zonedDateTimeNow.toLocaleString('de-DE'));
            

              
                Copy
              
            
          

• Spåra händelsers varaktighet: Beräkna varaktigheten för en händelse och visa den i ett läsbart format. Duration låter dig representera tidsskillnaden mellan två datum eller tider.

            const eventStart = Temporal.Instant.fromEpochSeconds(1700000000); // Exempel på starttidsstämpel
const eventEnd = Temporal.Instant.fromEpochSeconds(1700005000);   // Exempel på sluttidsstämpel
const durationOfEvent = eventEnd.since(eventStart);
console.log(`Händelsens varaktighet: ${durationOfEvent.minutes} minuter`);
            

              
                Copy
              
            
          

Bästa praxis för att använda Temporal API

• Använd oföränderlighet: Omfamna oföränderligheten hos Temporal-objekt. Undvik att modifiera objekt direkt. Skapa istället nya objekt med metoder som add, subtract och with.
• Hantera tidszoner noggrant: Var uppmärksam på tidszoner när du arbetar med datum och tider. Använd ZonedDateTime när du behöver representera datum och tider i en specifik tidszon.
• Använd tydliga variabelnamn: Använd beskrivande variabelnamn som tydligt indikerar vilken typ av Temporal-objekt som används (t.ex. plainDate, zonedDateTime, duration).
• Överväg polyfyllningar: Eftersom Temporal fortfarande är relativt nytt, säkerställ tillräckligt stöd genom att använda ett polyfill-bibliotek vid behov.
• Validera indata: Validera alltid användarindata för att säkerställa att datum och tider är i rätt format.

Migrering från gamla Date

Migrering från det gamla Date-objektet kan vara en gradvis process. Överväg dessa strategier:

• Inkrementell adoption: Börja med att använda Temporal i ny kod samtidigt som du behåller Date i befintliga delar av din applikation.
• Omslagsfunktioner: Skapa omslagsfunktioner som konverterar mellan Date och Temporal-objekt för att underlätta samverkan under migreringen.
• Grundlig testning: Testa migreringen omfattande för att säkerställa att alla datum- och tidsberäkningar är korrekta.

Temporal API vs. Moment.js

Moment.js var ett populärt bibliotek för datum- och tidshantering i JavaScript, men det anses nu vara ett äldre projekt och är i underhållsläge. Temporal API tillhandahåller en modernare och standardiserad lösning som åtgärdar många av bristerna i Moment.js. Moment.js är föränderligt och saknar inbyggt tidszonsstöd. Temporal API är oföränderligt och har inbyggt tidszonsstöd.

Slutsats

JavaScript Temporal API representerar en betydande förbättring jämfört med det gamla Date-objektet. Dess oföränderlighet, tydliga API, tidszonsstöd och kalenderstöd gör det till ett kraftfullt verktyg för att hantera datum och tider i moderna JavaScript-applikationer. Även om användningen fortfarande växer, kan du med en polyfill börja utnyttja dess fördelar idag. Eftersom API:et blir mer allmänt stött, förväntas det bli standard sättet att arbeta med datum och tider i JavaScript.

Omfamna Temporal API och lås upp ett effektivare och mer pålitligt sätt att hantera datum och tider i dina projekt, vilket säkerställer att din applikation hanterar globala tidszoner och beräkningar korrekt.